<!--
 * @Author: lihaogn
 * @Date: 2021-12-20 00:34:48
 * @LastEditTime: 2021-12-31 14:10:31
 * @LastEditor: lihaogn
 * @Description: 新增/修改权限对话框
 * @FilePath: \lix-admin-base-vue2\src\views\system\user-manage\permission-list\modules\NewOrUpdatePermissionDialog.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    title="新增权限"
    :visible.sync="dialogVisible"
    width="420px"
    @close="handleDialogCancel"
  >
    <el-form
      ref="permissionForm"
      :model="form"
      :rules="formRules"
      size="small"
      label-width="80px"
    >
      <el-form-item label="权限名称" prop="name">
        <el-input
          type="text"
          placeholder="系统管理"
          v-model.trim="form.name"
          autocomplete="off"
          :autofocus="true"
          :show-word-limit="true"
          :maxlength="20"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="权限标识" prop="mark">
        <el-input
          type="text"
          placeholder="systemManage"
          v-model.trim="form.mark"
          autocomplete="off"
          :autofocus="true"
          :show-word-limit="true"
          :maxlength="30"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :label="permissionType.PAGE">页面</el-radio>
          <el-radio :label="permissionType.ACTION">操作</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="权限描述"
          v-model.trim="form.description"
          :show-word-limit="true"
          :maxlength="30"
        ></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="handleDialogOk"
        :loading="okButtonLoading"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import {
  reqNewPermission,
  reqUpdatePermission
} from '../../../../../api/user-manage/permission/api'
import { PERMISSION_TYPE } from '../../../../../constant'
import { dialogMixin } from '../../../../../mixins/dialog'
export default {
  mixins: [dialogMixin],
  data() {
    return {
      form: {
        name: '',
        mark: '',
        type: '',
        description: ''
      },
      formRules: {
        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
        mark: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
        type: [{ required: true, message: '请选择权限类型', trigger: 'change' }]
      },
      permissionType: PERMISSION_TYPE
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.dialogVisible = val
        this.loading = true
        if (this.type === 'EDIT') {
          this.form = {
            name: this.dialogData.name,
            mark: this.dialogData.mark,
            type: this.dialogData.type,
            description: this.dialogData.description
          }
        }
        this.loading = false
      } else {
        this.$refs['permissionForm'].resetFields()
      }
    }
  },

  methods: {
    /**
     * @author: lihaogn
     * @Date: 2021-12-31 13:26:51
     * @description: 对话框关闭事件
     * @param {*}
     * @return {*}
     */
    handleDialogCancel() {
      this.$emit('update:visible', false)
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-31 13:26:54
     * @description: 对话框确定事件
     * @param {*}
     * @return {*}
     */
    handleDialogOk() {
      this.okButtonLoading = true

      this.$refs['permissionForm'].validate(async valid => {
        if (valid) {
          let res
          if (this.type === 'NEW') {
            res = await reqNewPermission(this.form)
          } else if (this.type === 'NEW_SUB') {
            res = await reqNewPermission({
              ...this.form,
              parentId: this.dialogData.id
            })
          } else {
            res = await reqUpdatePermission(this.dialogData.id, this.form)
          }

          if (res.success) {
            this.$message.success(res.message)
            this.dialogVisible = false
            this.$emit('ok')
          }

          this.okButtonLoading = false
        } else {
          this.okButtonLoading = false
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
